<template>
    <div class="collect-article">
        <van-icon 
            :name="isCollected ? 'star' : 'star-o'" 
            :color="isCollected ? '#ffa500' : ''" 
            @click="onCollect(articleId)"/>
    </div>
</template>

<script>
import {addCollect, deleteCollect} from '@/api/article'

export default {
    name: 'CollectArticle',
    props: {
        isCollected: {
            type: Boolean,
            required: true
        },
        articleId: {
            type: [Number, String],
            required: true
        }
    },
    methods: {
        async onCollect(articleId) {
            try {
                if(this.isCollected) {
                    await deleteCollect(articleId)
                    this.$toast.success('取消收藏')
                } else {
                    await addCollect(articleId)
                    this.$toast.success('收藏成功')
                }
                // 更新收藏状态
                this.$emit('update:isCollected', !this.isCollected)
            } catch(err) {
                console.log('操作失败', err)
            }
        }
    }
}
</script>

<style lang="less" scoped>
.van-icon {
    font-size: 40px;
}
</style>